<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	const props = defineProps({
		num: {
			type: Number,
			default: 1
		},
		min: {
			type: Number,
			default: 0
		}
	})
	const emits = defineEmits(['change'])
	const add = () => {
		let nums = props.num
		nums++
		emits('change', nums)
	}
	const minus = () => {
		let nums = props.num
		if(nums>props.min) {
			nums--
			emits('change', nums)
		}
	}
</script>

<template>
	<view class="number">
		<view class="line" @click.stop="minus">
			<image mode="widthFix" src="@/static/image/minus.png"></image>
		</view>
		<view class="num">
			{{num}}
		</view>
		<view class="line" @click.stop="add">
			<image mode="widthFix" src="@/static/image/add.png"></image>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.number {
		display: flex;
		align-items: center;

		.line {
			width: 30px;
			height: 30px;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;

			/* 外部/Gray 5 */
			background: rgba(243, 243, 243, 0.4);

			image {
				width: 14px;
			}
		}
		.num {
			padding: 8px 15px;
		}
	}
</style>